<style type="text/css">
.layout_clear{clear:both;}
#style_tool_bar h3{ text-align:left;}
#style_tool_bar ul {background: #e6e6e6 url(<?=$this->baseUrl;?>/public/styles/jquery/images/tab_bg.gif) 0 50% repeat-x; width:100%; margin-top:0px;}
#style_tool_bar ul li{border-right: 1px solid #ccc;}
#style_tool_bar ul li a{ font-weight:bold;}
.layout_line{margin-top:10px;}
.layout_line div{width:52px; height:60px; float:left; margin-left:10px;}
.layout_bs1_1{background:url(/public/images/t.gif) no-repeat 0 -440px;}
.layout_bs2_1{background:url(/public/images/t.gif) no-repeat 0 -250px;}
.layout_bs2_2{background:url(/public/images/t.gif) no-repeat 0 -312px;}
.layout_bs2_3{background:url(/public/images/t.gif) no-repeat 0 -375px;}
.layout_bs3_1{background:url(/public/images/t.gif) no-repeat 0 0;}
.layout_bs3_2{background:url(/public/images/t.gif) no-repeat 0 -60px;}
.layout_bs3_3{background:url(/public/images/t.gif) no-repeat 0 -123px;}
.layout_bs3_4{background:url(/public/images/t.gif) no-repeat 0 -185px;}
.layout_view_line{border:#0066FF dotted 2px; height:40px; background:#DAE7F3;}
.layout_module li{display:block; float:left; width:235px; height:25px; margin:5px 0 0px 0; text-align:left; font-weight:normal;}
.sortableItem h2{cursor:move;}
#tab_pannel{ padding-right:2px;}
#fragment-1,
#fragment-2,
#fragment-3,
#fragment-4,
#fragment-5,
#fragment-6{ background:#fff url(<?=$this->baseUrl;?>/public/spaces/img/mb_top_bg.gif) 0 bottom repeat-x; border:1px #ABBDDE solid; padding-bottom:20px;}
</style>
<script language="javascript">

var sortableChange = function(e, ui){
	if(ui.sender){
		ui.helper.css("width",ui.placeholder.width());
	}
};

$(document).ready(function(){
	var els = ['#left'];
	var $els = $(els.toString());	
	$els.sortable({
		items: '> .sortableItem',
		handle: 'h2',
		cursor: 'move',		
		helper: 'clone',		
		placeholder: "layout_view_line", 		
		tolerance: 'pointer',
		distance: 5,
		scroll: true,		
		connectWith: els,
		start: function(e,ui) {				
			ui.helper.css("width", ui.placeholder.width());
		},
		change: sortableChange		
	});		
	
});	

//保存模块排序
function savelayout(){

	document.moduleForm.layoutinfo.value = $('#left').sortable('serialize',{key:'leftmod[]'});
}

//删除模块
function removeModule(code)
{
	$("#module_" + code).remove(); 
}

//添加模块
function addModule(code,place)
{		
	$.post("<?=$this->url(array('module'=>'com','controller'=>'module','action'=>'get','lan'=>$this->lang,'uid'=>$this->uid),NULL,true);?>",{'code':code},	
	function(data){		
		$('#' + place).append(data)
	})
	
}

//添加、删除模块
function setModule(t)
{
	if(t.checked == true){
	var tmp = null;		
		addModule(t.value , 'left');
	}else{
		removeModule(t.value);
	}
}

//设置布局
function setLayout(clo,type,classname)
{
	var widthclass = 'w950';
	switch(clo){
		case 2:
			$('#right').children().clone(true).appendTo('#left');
			$('#right').empty();
			break;
		case 3:		
			break;
	}
	$('#content').removeClass();
	$('#content').addClass(widthclass + ' ' + classname);
	document.moduleForm.contentclass.value = widthclass + " " + classname;	
}

//关闭编辑功能
function closeEdit()
{	
	if(!confirm('<?=$this->t('spc_exit_confirm');?>'))return;
	$('#style_tool_bar').hide();	
	$('#left').sortable( "disable" );
	
	$.post("<?=$this->comUrl('module','exit');?>" ,null,
	function(data){		
		document.location.reload();		
	});
}

$(document).ready(
 	function (){	
		//空间管理导航条
		$("#tab_pannel > ul").tabs();
		
		//设置首页模块可排序
		$('.sortableItem h2 > a').css('display','none');		
		$('.sortableItem > h2').mouseover(function(){
		 	$(this.parentNode).css({"border":"2px dotted #0066FF", "opacity":"0.8"});
		}
		);		
		$('.sortableItem > h2').mouseout(function(){
			if($.browser.msie){
				$(this.parentNode).removeAttr('style');
			}else{
		 		$(this.parentNode).css({"border":"", "opacity":""});
			}
		}
		);
		
	}
 );
</script>
<div style="display:; width:99%; margin:5px auto 0 auto;" id="style_tool_bar">
<form action="<?=$this->comUrl('module','channels');?>" name="moduleForm" method="post">
<div id="tab_pannel">
<ul>
<div style="float:right;">
<input type="hidden" name="layoutinfo" id="layoutinfo" />
<input name="channel" type="hidden" id="channel" value="<?=$this->currentControler;?>" />
  <input type="submit" name="button4" id="button4" value="<?=$this->t('spc_save_edit');?>" onclick="savelayout();" style="background:#FFCC33; border:1px #FF6600 solid;" />
  <input type="button" name="button5" id="button5" value="<?=$this->t('spc_cancel');?>" onclick="closeEdit();" /> 
</div>
<li><a href="#fragment-1"><?=$this->t('spc_mod_man');?></a></li>
</ul>
<br style="clear:both;" />
</div>

<div id="fragment-1" style="display:none;">
<ol class="layout_module">
<?

$unusemodulekey = $this->spacesetting['channels'][$this->currentControler]['left'];
if(!is_array($unusemodulekey))$unusemodulekey = array(false);
$moduleArray = $this->sysmodules;
foreach ($moduleArray as $key=>$mod){
?>
<li>
  <input name="mod<?=$mod['module_id'];?>" type="checkbox" id="mod<?=$mod['module_id'];?>" value="<?=$mod['module_field'];?>" onclick="setModule(this);"<?=(in_array($mod['module_field'],$unusemodulekey) or empty($unusemodulekey))?' checked="checked"':'';?> />
  <?=$this->menuname[$mod['module_field']];?></li>
  <? } ?>
</ol>
  <div class="clear"></div>
  <? if($this->authInfo->memb_type!='b2b'){?>
  <h2><?=$this->t('spc_ads_mod');?></h2>
<ol class="layout_module">
<? 
if(count($this->adplaces)>0){
foreach($this->adplaces as $adplace){?>
<li><input name="mod-ads-<?=$adplace['place_id'];?>" type="checkbox" id="mod-ads-<?=$adplace['place_id'];?>" value="ads<?=$adplace['place_id'];?>" onclick="setModule(this);"<?=in_array('ads'.$adplace['place_id'],$this->spacesetting['modules'])?' checked="checked"':'';?> />
  <?=$adplace['place_name'];?></li>
<? }}else{ ?>
<li><?=$this->t('no_ads_module');?><a href="<?=$this->baseUrl;?>/comadmin/ads/addplace"><?=$this->t('add_ads_module');?></a></li>
<? } ?>
</ol>
<div class="clear"></div>
<? } ?>
</div>

<div id="fragment-2" style="display:none;">
	<div class="layout_line" style="cursor:pointer;">
    	<!--<div class="layout_bs1_1" onclick="setLayout(1,1,'');"></div>-->
    	<div class="layout_bs2_1" onclick="setLayout(2,1,'r2-230')"></div>
        <div class="layout_bs2_2" onclick="setLayout(2,2,'l2-310')"></div>
        <div class="layout_bs2_3" onclick="setLayout(2,3,'l2-230')"></div>
    	<!--<div class="layout_bs3_1" onclick="setLayout(3,1,'lc3-190')"></div>
        <div class="layout_bs3_2" onclick="setLayout(3,2,'rc3-190')"></div>
        <div class="layout_bs3_3" onclick="setLayout(3,3,'lr3-190')"></div>
        <div class="layout_bs3_4" onclick="setLayout(3,4,'lr3-190')"></div>-->
    </div>
        <div class="clear"></div>   
</div>

</form>
<div style="clear:both;"></div> 
</div>
<div style="margin:5px;"></div>